<template>
  <div id="Map" class="lxl_body"></div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted } from "vue";
import dataInfo from "./Wuchuan1.json";
export default {
  setup() {
    onMounted(() => {
      //需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("Map"));
      echarts.registerMap("吴川市", dataInfo, {});
      //   myChart.showLoading();
      // 绘制吴川市地图
      let option = {
        title: {
          top: 30,
          text: "吴川市兵源分布图",
          subtext: "",
          x: "center",
          textStyle: {
            fontSize: 20,
            color: "#ccc",
          },
        },
        geo: {
          map: "吴川市",
          show: true,
          roam: true,
          zoom: 1.2,
          scaleLimit: {
            min: 0.6,
            max: 1.3,
          },
          label: {
            // normal: {
            align: "top",
            show: true,
            color: "#adbc1c",
            fontSize: 12,
            // },
          },
          itemStyle: {
            // normal: {
            borderColor: "rgba(147, 235, 248, 1)",
            borderWidth: 1, //地图边线
            areaColor: {
              type: "radial",
              x: 0.5,
              y: 0.5,
              r: 0.8,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                },
              ],
              globalCoord: false, // 缺省为 false
            },
            shadowColor: "rgba(128, 217, 248, 1)",
            // shadowColor: 'rgba(255, 255, 255, 1)',
            shadowOffsetX: -2,
            shadowOffsetY: 2,
            shadowBlur: 10,
            // },
          },
          emphasis: {
            itemStyle: {
              areaColor: "#ffd181", //悬浮区背景 1
              borderWidth: 0,
              color: "green",
            },
             label: {
              show: true,
            },
          },
        },
      };
      myChart.setOption(option);
      window.onresize = function () {
        //自适应大小
        myChart.resize();
      };
    });
  },
  components: {},
  mounted() {},
};
</script>

<style scoped>
.lxl_body {
  width: 100%;
  height: 700px;
}
</style>